<template>
    <div class="page-container-tab" v-loading="loading">
        <div class="page-filter-option mb-3">
            <el-form :inline="true" :model="filterOption" class="flex flex-wrap">
                <el-form-item v-if="initStatus">
                    <component-page-org-tree-option-check v-model="filterOption.plat_code" @change="filterChange"></component-page-org-tree-option-check>
                </el-form-item>
                <el-form-item v-if="initStatus">
                    <component-page-org-tree-option-check v-model="filterOption.plat_code_exclude" @change="filterChange" :placeholder="$t('platform.setting.tree.org-exclude')"></component-page-org-tree-option-check>
                </el-form-item>
                <el-form-item v-if="initStatus">
                    <component-page-game-option v-model="filterOption.game_id" @change="filterChange"></component-page-game-option>
                </el-form-item>
                <el-form-item v-if="initStatus">
                    <component-page-game-option v-model="filterOption.game_id_exclude" @change="filterChange" :placeholder="$t('game.setting.game.exclude')"></component-page-game-option>
                </el-form-item>
                <el-form-item v-if="initStatus">
                    <component-page-option-datetime-range type="datetimerange" align="center" defaultShortcuts
                                                          :init-last-day="0" v-model="filterOption.datetime" @change="filterChange">
                    </component-page-option-datetime-range>
                </el-form-item>
                <el-form-item class="small">
                    <el-select :placeholder="$t('game.data.settlement.ext.is_free')" v-model="filterOption.ext.is_free" @change="filterChange" clearable>
                        <el-option v-for="(item, index) in $t('form.booleanList')" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="small">
                    <el-select :placeholder="$t('game.data.settlement.ext.is_bonus')" v-model="filterOption.ext.is_bonus" @change="filterChange" clearable>
                        <el-option v-for="(item, index) in $t('form.booleanList')" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="small">
                    <component-page-option-top v-model="filterOption.page_size" @change="filterChange"></component-page-option-top>
                </el-form-item>
                <el-form-item>
                    <el-button @click="filterChange">{{ $t('action.search') }}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="page-container-inner-fluid flex-auto flex flex-col">
            <component-page-content-resize v-slot="{ content }">
                <el-table style="width: 100%" :height="content.height"
                          :data="dataList"
                          highlight-current-row>
                    <el-table-column min-width="150" :label="$t('stats.risk.slo.cresset')" class-name="p-0" fixed="left">
                        <template slot-scope="scope">
                            <div v-if="scope.row.game_id == null">{{ $t('form.summary') }}</div>
                            <div v-else style="height: 22px" :style="makeCressetStyle(scope)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" :label="$t('game.setting.game.name')" prop="game_id">
                        <template slot-scope="scope">
                            <div v-if="scope.row.game_id == null">----</div>
                            <component-page-games v-else :game-code="scope.row.game_id"></component-page-games>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" :label="$t('game.data.settlement.bet_num')+'(USD)'" prop="bet_num">
                        <template slot-scope="scope">
                            <component-page-numeral :num="scope.row.bet_num" format="0,0.[00]"></component-page-numeral>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" :label="$t('game.data.settlement.gain_player')+'(USD)'" prop="gain_player">
                        <template slot-scope="scope">
                            <component-page-numeral :num="scope.row.gain_player" format="0,0.[00]"></component-page-numeral>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="180" :label="$t('stats.risk.slo.doc_count')" prop="doc_count">
                        <template slot-scope="scope">
                            <component-page-numeral :num="scope.row.doc_count"></component-page-numeral>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="170" label="RTP" prop="rtp">
                        <template slot-scope="scope">
                            <component-page-numeral :num="scope.row.rtp" format="0,0.[00]"></component-page-numeral>
                        </template>
                    </el-table-column>
                </el-table>
            </component-page-content-resize>
            <div class="flex-grow-0"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['activeName'],
    data() {
        return {
            initStatus: false,
            loading: false,
            filterOption: {
                plat_code: [],
                plat_code_exclude: [],
                game_id: [],
                game_id_exclude: [],
                datetime: null,
                datetime_column: 'end_time',
                keyword: '',
                keyword_column: 'account_id',
                ext: {
                    is_free: null,
                    is_bonus: null,
                },
                page_size: 100,
            },
            cresset: {},
            dataList: [],
        }
    },
    watch: {
        activeName: {
            immediate: true,
            handler(n, o) {
                if (n == 'game' && !this.initStatus) {
                    // 标记初始化
                    this.initStatus = true;
                }
            }
        },
    },
    methods: {
        clearFilterOption() {
            this.loading = true;
            this.filterOption.page = 1;
        },
        filterChange() {
            this.clearFilterOption();
            this.getDataList();
        },
        getDataList() {
            axios.get(this.$helper.makeQueryUrl(
                '/stats/risk/slo/topGame', this.filterOption
            )).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.cresset = response.data.resp_data.cresset;
                    this.dataList = response.data.resp_data.data;
                } else {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                }
                this.loading = false;
            })
        },
        makeCressetStyle(scope) {
            for (let v of this.cresset) {
                if (
                    eval(`${scope.row.rtp}
                    ${v.rtp[0]}
                    ${v.rtp[1]}`) &&
                    eval(`${scope.row.gain_player}
                    ${v.gain_player[0]}
                    ${v.gain_player[1]}`)
                ) {
                    return {
                        background: v.color
                    };
                }
            }
            return {};
        },
    }
}
</script>

<style lang="scss">

</style>
